<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<!--{include file='header.tpl' JS=$smarty.const.BAOGG_JS CSS=$smarty.const.BAOGG_CSS THEME=$smarty.const.BAOGG_THEME} -->
		<!-- header begin -->
		<link rel="stylesheet" href="/beimuaihui/html/themes/default/styles/960/reset.css" />
		<link rel="stylesheet" href="/beimuaihui/html/themes/default/styles/960/text.css" />
		<link rel="stylesheet" href="/beimuaihui/html/themes/default/styles/960/960_24_col.css" />
		<link rel="stylesheet" href="/beimuaihui/html/themes/default/styles/thickbox.css" />
		<link rel="stylesheet" href="/beimuaihui/html/themes/default/styles/jquery-ui.css" />
		<link rel="stylesheet" href="/beimuaihui/html/themes/default/styles/imgViewer.css" />
		<link rel="stylesheet" href="/beimuaihui/html/themes/default/styles/index.css" />
		<script type="text/javascript" src="/beimuaihui/html/scripts/jquery.js"></script>
		<script type="text/javascript" src="/beimuaihui/html/scripts/jquery-ui.js"></script>
		<!-- header end -->
		<script type="text/javascript">
			var tb_pathToImage = "/beimuaihui/html/themes/default/images/thickbox/loadingAnimation.gif";
		</script>
		<script type="text/javascript" src='/beimuaihui/html/scripts/thickbox.js'></script>
		<script type="text/javascript">
			$( function() {

				var bodyHeight = $("#bd").height();
				var moduleHeight = $("#module").height();
				if (parseInt(bodyHeight) > parseInt(moduleHeight)) {
					//$("#module").height($("#bd").height());
				}

			});
		</script>
	</head>
	<body>
		<div class="container_24">
			<div class="imageMenu" class="grid_24">
				<ul>
					<li class="landscapes-pic">
						<a href="#">Landscapes</a>
					</li>
					<li class="people-pic">
						<a href="#">People</a>
					</li>
					<li class="nature-pic">
						<a href="#">人物</a>
					</li>
					<li class="urban-pic">
						<a href="#">Urban</a>
					</li>
					<li class="abstract-pic">
						<a href="#">Abstract</a>
					</li>
					<li class="baogg-jpg">
						<a href="#">Abstract</a>
					</li>
					<li class="baogg-png">
						<a href="#">Abstract</a>
					</li>
					<li class="baogg-office">
						<a href="#">Abstract</a>
					</li>
				</ul>
			</div>
			<div class="clear">
			</div>
			<div id="nav"  class="grid_24  baogg-widget-container">
				<a href="index.html">Index1</a>
				<a href="index.html">Index2</a>
				<a href="index.html">Index3</a>
				<a href="index.html" class="active">Index4</a>
				<a href="index.html">Index5</a>
				<a href="index.html">Index6</a>
				<a href="index.html">Index7</a>
			</div>
			<script type="text/javascript">
				$( function() {
					$(".imageMenu a").width(300);
					//last picture needn't animal
					$(".imageMenu a:not(:last)").animate({
						width: "49px"
					}, {
						queue: false,
						duration: 3000
					});
					$(".imageMenu a:not(:last)").hover( function() {
						$(this).animate({
							width: "300px"
						}, {
							queue: false,
							duration: 300
						});
					}, function() {
						$(this).animate({
							width: "49px"
						}, {
							queue: false,
							duration: 300
						});
					});
				});
				$( function() {
					var $photo=$(".imageMenu");
					var $widget=$(".baogg-widget-container");

					$('li',$photo).draggable({
						//cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
						revert: 'valid', // when not dropped, the item will revert back to its initial position
						containment: 'document', // stick to demo-frame if present
						helper: 'clone',
						scroll: true,
						cursor: 'move'
					});

					$widget.droppable({
						accept: '.imageMenu ul > li',
						activeClass: 'ui-state-highlight',
						drop: function(ev, ui) {
							deleteImage(ui.draggable,$(this));
						}
					});

					function deleteImage($item,self) {
						
						$("a",$item).css("width",300);
						var $list = $('<div class="baogg-widget imageMenu"><ul></ul></div>').appendTo(self);								
						$item.clone().appendTo($("ul",$list)).fadeIn( function() {
							$item.animate({
								width: '300px'
							}).find('img').animate({
								height: '36px'
							});
						});
					}

					function recycleImage($item) {
						$item.fadeOut( function() {
							$item.css('width','96px').find('img').css('height','72px').end();
						});
					}

				});
			</script>
			<div class="clear">
			</div>
			<div id="article" class="grid_18  baogg-widget-container">
				<ul id="photo-container" class="article-content baogg-widget">
					<li>
						<div id='article-article_id'>
							<div id='article-img-article_id'>
								<img src='' />
							</div>
							<h3>title</h3>
							<em>modify_time</em>
							<p>
								content
							</p>
							<a href='url' class='thickbox'>comment </a>
						</div>
					</li>
					<li>
						<div id='article-article_id'>
							<div id='article-img- article_id'>
								<img src='' />
							</div>
							<h3>title</h3>
							<em>modify_time</em>
							<p>
								content
							</p>
							<a href='url' class='thickbox'>comment </a>
						</div>
					</li>
					<li>
						<div id='article-article_id'>
							<div id='article-img- article_id'>
								<img src='' />
							</div>
							<h3>title</h3>
							<em>modify_time</em>
							<p>
								content
							</p>
							<a href='url' class='thickbox'>comment </a>
						</div>
					</li>
					<li>
						<div id='article-article_id'>
							<div id='article-img- article_id'>
								<img src='' />
							</div>
							<h3>title</h3>
							<em>modify_time</em>
							<p>
								content
							</p>
							<a href='url' class='thickbox'>comment </a>
						</div>
					</li>
					<li>
						<div id='article-article_id'>
							<div id='article-img- article_id'>
								<img src='' />
							</div>
							<h3>title</h3>
							<em>modify_time</em>
							<p>
								content
							</p>
							<a href='url' class='thickbox'>comment </a>
						</div>
					</li>
				</ul>
			</div>
			<div id="navigate" class="grid_6  baogg-widget-container">
				<div id="category" class="baogg-widget">
					<h3>Translate tag</h3>
					<ul>
						<li>
							<a href='#'>tag_name</a>
						</li>
					</ul>
				</div>
				<div id="articles" class="baogg-widget">
					<h3>Translate latest Translate article </h3>
					<ul class="article-content">
						<li>
							<a href='#article-article_id'>
							<em>title</em>
							</a>
						</li>
					</ul>
				</div>
				<div id="comments" class="baogg-widget">
					<h3>Translate latest  Translate comment </h3>
					<ul>
						<li>
							<a href='blog/comment/article/article_id/article_id?KeepThis=true&TB_iframe=true&height=700&width=500' class='thickbox'>
							<em>comment_title</em>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="clear">
			</div>
			<div id="ft" class="grid_24  baogg-widget-container">
				<div class="baogg-widget">
					copyright@beimuaihui beta edition
				</div>
			</div>
		</div>
	</body>
</html>
